body {
  background-color: #dbdde0;
}

.top {
  background-color: #333;
  height: 62px;
  width: 100%;
  display: flex;
}

.top img {
  margin-left: 15%;
}

.top2 {
  background-color: #222;
  display: flex;
  align-items: center;
  height: 50px;
}

.top2 .left {
  display: flex;
  justify-content: space-evenly;
  width: 50%;
  margin-left: 11%;
}

.top2 .left span {
  color: white;
  font-size: large;
}

.top2 .right {
  width: 20%;
  color: white;
  margin-left: 15%;
  display: flex;
  justify-content: space-evenly;
}

.mid {
  width: 70%;
  margin-left: 15%;
  background-color: white;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
}

.mid .left {
  width: 80%;
}

.mid .left .left1 {
  background-color: #dd171f;
  width: 18%;
  height: 50px;
}

.mid .left .left1 .text1 {
  color: white;
  font-size: larger;
  font-weight: 700;
  margin-left: 60%;
}

.mid .left .left1 .text2 {
  color: #aaa;
  margin-left: 12%;
}

.mid .left .right1 {
  width: 70%;
  display: flex;
  justify-content: space-evenly;
  margin-left: 25%;
}

.mid .left .right1 .box1 {
  border: 1px solid #aaa;
  margin-bottom: 50px;
}

.mid .left .right1 .box1 .text {
  display: flex;
  justify-content: center;
  margin: 20px;
  font-size: large;
}

.mid .left .left2 {
  background-color: #5c5d5e;
  width: 18%;
  height: 50px;
}

.mid .left .left2 .text3 {
  color: white;
  font-size: larger;
  font-weight: 700;
  margin-left: 60%;
}

.mid .left .left2 .text4 {
  color: #aaa;
  margin-left: 30%;
}

.mid .left .right2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mid .left .right2 .left3 {
  display: flex;
  flex-direction: column;
}

.mid .left .right2 .left3 img {
  width: 300px;
  margin: 10px;
  margin-left: 35%;
}

.mid .left .right2 .right3 {
  display: flex;
  flex-direction: column;
}

.mid .left .right2 .right3 img {
  width: 340px;
  margin: 10px;
  margin-left: 40%;
}

.mid .right {
  background-color: #eee;
}

.mid .right .img2 {
  display: flex;
  justify-content: space-evenly;
}

.mid .right .i1 {
  display: flex;
  flex-direction: column;
}

.mid .right .i2 {
  display: flex;
  flex-direction: column;
}

.mid .right .i3 {
  display: flex;
  flex-direction: column;
}
